<template>
  <n-card :bordered="false" class="proCard">

    <BasicTable :columns="columns" :request="loadDataTable" ref="actionRef" :row-key="(row) => row.id"
      @update:check-row-keys="onCheckedRow" :pagination="paginationReactive" :theme-overrides="tableTheme"
      :scroll-x="1500" striped virtual-scroll>
      <!--      :max-height="250"-->
      <!--      :actionColumn="actionColumn"-->


      <template #toolbar>
        <BasicForm @register="register" :showAdvancedButton="false" @submit="handleSubmit" :show-reset-button="false">
          <template #statusSlot="{ model, field }">
            <n-input v-model:value="model[field]" />
          </template>
        </BasicForm>
        <!--        <n-button type="primary" @click="reloadTable">刷新数据</n-button>-->
      </template>
    </BasicTable>
  </n-card>
</template>

<script lang="ts" setup>

import { DataTableProps, SelectOption, useMessage } from 'naive-ui';
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { queryByProject, getProjects } from "@/api/statistics/stastistics";
import { BasicTable } from '@/components/Table';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';

// const router = useRouter();
// const message = useMessage();
const actionRef = ref();

const queryParams = reactive({
  device: undefined,
  test: false
});

//{
// "id":48,
// "imei1":"358688000000158",
// "imei2":"358688000000158",
// "imei3":null,
// "imei4":null,
// "project":"MT350_A18206",
// "mcc":460,
// "mnc":2,
// "region":"中华人民共和国",
// "version":"V01",
// "datetime":"2022-07-18 16:18:21",
// "isTest":null
// }
const columns = [
  {
    title: '项目名称',
    width: 180,
    key: 'project',
    fixed: "left"
  },
  {
    title: 'IMEI1',
    width: 150,
    key: 'imei1'
  },
  {
    title: 'IMEI2',
    width: 150,
    key: 'imei2'
  },
  {
    title: 'IMEI3',
    width: 150,
    key: 'imei3'
  },
  {
    title: 'IMEI4',
    width: 150,
    key: 'imei4'
  },
  {
    title: 'MCC',
    key: 'mcc',
    width: 60,
    minWidth: 30
  },
  {
    title: 'MNC',
    key: 'mnc',
    width: 60,
    minWidth: 30,
  },
  {
    title: '日期时间',
    width: 180,
    key: 'datetime'
  },
  {
    title: '地区',
    key: 'region'
  },
  {
    title: '版本号',
    key: 'version',
    width: 90,
    minWidth: 30,
    fixed: "right"
  }
]


type DataTableThemeOverrides = NonNullable<DataTableProps['themeOverrides']>

const tableTheme: DataTableThemeOverrides = { thColor: "#F79646FF", thFontWeight: "bold" }

// <n-select v-model:value="selectValue" filterable tag :options="options" />
const optionsRef = ref<SelectOption[]>([]);

const schemas = ref<FormSchema[]>([
  {
    field: 'project',
    labelMessage: '项目名称',
    component: 'NSelect',
    label: '项目名称',
    defaultValue: queryParams.device,
    componentProps: {
      placeholder: '请输入项目名称',
      filterable: true,
      tag: true,
      options: optionsRef.value,
      onUpdateValue: (e: any) => {
        queryParams.device = e;
      },
    }, giProps: {
      span: 3
    }
  },
  {
    field: 'test',
    labelMessage: '测试项目必须选择才可以查询',
    component: 'NSwitch',
    label: '是否测试',
    defaultValue: queryParams.test,
    componentProps: {
      placeholder: '请选择项目属性',
      filterable: true,
      tag: true,
      options: optionsRef.value,
      onUpdateValue: (e: any) => {
        queryParams.test = e;
      },
    }

  }
]);

const [register, { }] = useForm({
  gridProps: {
    xGap: "10",
    // yGap: "8",
    // cols: '4 m:2 xl:4',
    cols: '4',
    itemResponsive: true

  },
  inline: true,
  isFull: false,
  labelWidth: 'auto',
  // labelPlacement: 'left',
  schemas,
});


const loadDataTable = async (res: any) => {
  if (queryParams.device != undefined) {
    const {
      data,
      page,
      pageSize,
      pageCount
    } = await queryByProject({ ...queryParams, ...res });
    paginationReactive.page = page;
    paginationReactive.pageSize = pageSize;
    paginationReactive.pageCount = pageCount;
    return { list: data, page, pageSize, pageCount };
  }
  return [];
};


const paginationReactive = reactive({
  page: 1,
  pageSize: 50,
  pageCount: 5,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100],
  onChange: (page: number) => {
    paginationReactive.page = page
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
  }
})

onMounted(async () => {
  const { data } = await getProjects();
  if (data) {
    data.forEach((item) => {
      optionsRef.value.push({
        label: item['name'],
        value: item['name']
      });
    });
  }
});

function onCheckedRow(rowKeys) {
  console.log(rowKeys);
}

function reloadTable() {
  actionRef.value.reload();
}

function handleSubmit() {
  paginationReactive.page = 1;
  actionRef.value.page = 1;
  queryParams['page'] = 1;
  actionRef.value.updatePage(1);
  reloadTable();
}

/*function handleReset() {
  queryParamsStore.clearSheetData();
  queryParams.value = Object.assign(unref(queryParams.value),  queryParamsStore.getSheetParams);
}*/
</script>

<style lang="less" scoped>
.page-container {
  width: 100%;
  border-radius: 4px;
  padding: 50px 0;
  height: 100vh;

  .text-center {
    h1 {
      color: #666;
      padding: 20px 0;
    }
  }

  img {
    width: 350px;
    margin: 0 auto;
  }
}
</style>
